<template>
  <a-modal destroyOnClose title="管理员账号" :okText="$t('common.confirm')" :cancelText="$t('common.cancel')" :visible="visible" :width="520" @cancel="cancelModal(false)" @ok="cancelModal(true)" class="AddAcct">
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item :label="$t('common.name')" v-bind="formItemLayout">
            <a-input v-decorator="['name',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.name')}` }]}]" :placeholder="$t('common.name')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('common.mobile')" v-bind="formItemLayout">
            <a-input v-decorator="['phone',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.mobile')}` }]}]" :placeholder="$t('common.mobile')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('common.email')" v-bind="formItemLayout">
            <a-input v-decorator="['email',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.email')}` }]}]" :placeholder="$t('common.email')" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="24">
          <a-form-item :label="$t('acct.affiliated_unit')" v-bind="formItemLayout">
            <a-input v-decorator="['company',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('acct.affiliated_unit')}` }]}]" :placeholder="$t('acct.affiliated_unit')" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('acct.role')" v-bind="formItemLayout">
            <a-select v-model="role" v-decorator="['role',{rules: [{ required: true, message: `${$t('common.choose')}${$t('acct.role')}` }]}]" :placeholder="`${$t('common.choose')}${$t('acct.role')}`">
              <template>
                <a-select-option value="ROLE_VENDOR">{{$t('acct.VENDOR_MANAGER')}}</a-select-option>
                <a-select-option value="ROLE_HRBP">{{$t('acct.VENDOR_COMPANY')}}</a-select-option>
                <a-select-option value="ROLE_ADMIN">{{$t('acct.ROLE_ADMIN')}}</a-select-option>
              </template>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('common.defaultPwd')" v-bind="formItemLayout">
            <a-input type="password" v-decorator="['passwd',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.defaultPwd')}` }]}]" :placeholder="$t('common.defaultPwd')"/>
          </a-form-item>
        </a-col> -->
      </a-row>
      <!-- <p v-if="!disabled">
        <a-checkbox class="checkbox" v-model="mailremind"></a-checkbox>
        {{$t('acct.send_emil_info')}}
      </p> -->
    </a-form>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
import { twoArrCludes } from '@/util/roles'
import { createAccount, editAccount } from '@/api/config'
// import { selectTreeList } from '@/api/employingUnit'
export default {
  name: 'AddAcct',
  props: ['visible', 'record'],
  components: { },
  data () {
    return {
      form: this.$form.createForm(this),
      formItemLayout: '',
      title: 'acct.increase_acct',
      showCompany: true,
      mailremind: false,
      companyList: [],
      role: 'ROLE_HRBP',
      company: '',
      id: '',
      limit: false,
      disabled: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  watch: {
    visible: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.initData()
        }
      },
      immediate: true
    }
  },
  methods: {
    twoArrCludes,
    mountData () {
      this.title = 'acct.increase_acct'
      this.showCompany = true
      this.mailremind = false
      this.company = ''
      this.disabled = false
      this.id = ''
      if (this.record) {
        // this.form.setFieldsValue({
        //   enterpriseName: this.record.enterpriseName
        // })
        // this.company = this.record.name
        if (this.$route.path === '/employingUnit/employingUnitList' || this.$route.path === '/employingUnit/edit' || this.$route.path === '/employingUnit/myEdit') {
          this.showCompany = false
        } else {
          this.title = 'acct.edit_acct'
          this.disabled = true
          this.role = this.record.role
          this.id = this.record.id
          this.form.setFieldsValue({
            // company: this.record.company,
            // passwd: this.record.passwd,
            name: this.record.name,
            phone: this.record.phone,
            role: this.record.role,
            email: this.record.email
          })
        }
      }
    },
    cancelModal (flag) {
      // 提交数据
      if (flag) {
        this.arrangeData()
      } else {
        this.$emit('close')
      }
    },
    initData () {
      this.$nextTick(() => {
        this.mountData()
      })
      // this.getTreelist()
    },
    changeTree (value, label, extra) {
      this.company = label[0]
    },
    // getCompanyList (arr) {
    //   return arr.map(item => {
    //     let obj = {
    //       title: item.name,
    //       value: item.enterpriseId,
    //       key: item.enterpriseId
    //     }
    //     if (item.children) {
    //       obj.children = this.getCompanyList(item.children)
    //     }
    //     return obj
    //   })
    // },
    // async getTreelist () {
    //   let params = {
    //     keyword: '',
    //     status: ''
    //   }
    //   let res = await selectTreeList(params)
    //   if (res.code === 200) {
    //     this.companyList = this.getCompanyList(res.data)
    //   } else {
    //     this.$message.error(res.message)
    //   }
    //   this.$nextTick(() => {
    //     this.mountData()
    //   })
    // },
    arrangeData () {
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = values
          params.role = 'ROLE_HRBP'
          params.account = params.email
          if (this.disabled) {
            this.editData(params)
          } else {
            this.createData(params)
          }
        }
      })
    },
    async editData (params) {
      params.id = this.id
      let res = await editAccount(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.$emit('close', true)
      } else {
        this.$message.error(res.message)
      }
    },
    async createData (params) {
      let res = await createAccount(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.$emit('close', true)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.blue_text
  color var(--blue-500)
.managerLimit
  display inline-block
  margin-top 48px
.ant-form-item
  margin-bottom 0
</style>
